// useSelector:把store中的数据映射到组件中
// useDispatch:生成提交action对象中的dispatch方法
import { useSelector, useDispatch } from 'react-redux'
import { increment, reset } from './store/modules/counterStore'

const App = () => {
  // 使用数据:state.counterReducer中的counterReducer
  // 指的是 combineSlices({ counterReducer }); 中的counterReducer
  const { count } = useSelector(state => state.counterReducer)

  // 修改数据
  const dispatch = useDispatch()

  // 组件修改
  const handleClick = () => {
    const action = increment();
    dispatch(action)
  }

  // 向store中提交数据
  const handleReset = () => {
    dispatch(reset(0));
  }

  return (
    <div>
      <p>{count}</p>
      <button onClick={handleClick}>+</button>
      <button onClick={handleReset}>还原</button>
    </div>
  )
};

export default App;
